<template>
	<div class="AsideBar">
		<main>
			<!-- <n-layout has-sider> -->
			<n-layout-sider
				bordered
				collapse-mode="width"
				:collapsed-width="64"
				:width="240"
				:collapsed="collapsed"
				show-trigger
				@collapse="collapsed = true"
				@expand="collapsed = false"
			>
				<div class="aside-title" :class="{ 'checkout-menu': collapsed }">
					<img src="../../../assets/image/law.jpg" alt="" />
					<h1 v-if="!collapsed">LawZhuo.</h1>
				</div>
				<n-menu
					v-model:value="activeKey"
					:collapsed="collapsed"
					:collapsed-width="64"
					:collapsed-icon-size="20"
					:options="menuOptions"
					accordion
				/>
			</n-layout-sider>
			<!-- </n-layout> -->
		</main>
	</div>
</template>

<script lang="ts">
import { defineComponent, h, ref, Component } from "vue";
import { NIcon } from "naive-ui";
import type { MenuOption } from "naive-ui";
import {
	BarChartOutline,
	HomeOutline,
	PeopleOutline,
	PieChartOutline,
	SettingsOutline,
	PersonOutline,
	MenuOutline,
} from "@vicons/ionicons5";
import localCache from "../../../utils/local-cache";

function renderIcon(icon: Component) {
	return () => h(NIcon, null, { default: () => h(icon) });
}

// const menuOptions: MenuOption[] = [
// 	{
// 		label: "首页",
// 		key: "HomePage",
// 		icon: renderIcon(HomeOutline), // Home
// 		url: "/main/homePage",
// 	},
// 	{
// 		label: "数据报告",
// 		key: "Analysis",
// 		icon: renderIcon(BarChartOutline),
// 		url: "/main/analysis",
// 		children: [
// 			{
// 				type: "group",
// 				label: "可视化面板",
// 				icon: renderIcon(PieChartOutline), // PieChart
// 				key: "Dashboard",
// 				url: "/main/analysis/dashboard",
// 			},
// 		],
// 	},
// 	{
// 		label: "系统设置",
// 		key: "Setting",
// 		icon: renderIcon(SettingsOutline),
// 		url: "/main/system",
// 		children: [
// 			{
// 				type: "group",
// 				label: "角色管理",
// 				icon: renderIcon(PeopleOutline), // people
// 				key: "User",
// 				url: "/main/system/user",
// 			},
// 			{
// 				type: "group",
// 				label: "菜单管理",
// 				icon: renderIcon(MenuOutline),
// 				key: "Menu",
// 				url: "/main/system/menu",
// 			},
// 			// ServerOutline
// 		],
// 	},
// 	{
// 		label: "作者介绍",
// 		key: "AuthorInformation",
// 		icon: renderIcon(PersonOutline),
// 		url: "/main/authorInformation",
// 	},
// ];

export default defineComponent({

	setup() {
		const menuOptions = localCache.getCache('limitMenus');
		console.log(menuOptions, "测试")
		return {
			activeKey: ref<string | null>(null),
			collapsed: ref(true),
			menuOptions,
		};
	},
});
</script>

<style scoped lang="scss">
::v-deep .n-layout-sider {
	height: 100%;
	// background-color: var(--color1);
	box-shadow: var(--boxShadow3);
	// border: 1px solid #a7ebc7;
	border-radius: 10px;
}
.AsideBar {
	padding: 24px;
	height: 100vh;
	border-radius: 10px;
	// background-color: var(--color1);
	box-sizing: border-box;
	main {
		height: 100%;
		.aside-title {
			display: flex;
			align-items: center;
			padding: 0 24px;
			height: 8vh;
			transition: all 1.5s;
			box-sizing: border-box;
			// border-bottom: 1px solid #a7ebc7;
			box-shadow: 0 2px 5px rgba(1, 41, 112, 0.08);
			h1 {
				margin-left: 12px;
				font-size: 20px;
				// color:aqua;
				background-image: -webkit-linear-gradient(right, #747bff, #4154f1);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			img {
				// width: 25%;
				height: 100%;
				border-radius: 50%;
				// border: 1px solid pink
			}
		}
		.checkout-menu {
			justify-content: center;
			padding: 0 !important;
			img {
				// width: 80% !important;
				height: 80% !important;
			}
		}
	}
}
</style>
